<template>
  <section class="todoapp">
    <!-- 头部部分 -->
      <HmHeader
      @addList="addList"
      ></HmHeader>

    <!-- 主体部分 -->
      <HmBody 
      :list="renderList"
       @delList="delList"
       @isAll="isAll"
      ></HmBody>

    <!-- 底部部分 -->
      <HmFooter
      :sum="sum"
      :isShow="isShow"
      @clearList="clearList"
      @switchover="switchover"
      ></HmFooter>
  </section>
</template>

<script>
// 引入组件
import HmHeader from './components/HmHeader.vue'
import HmBody from './components/HmBody.vue'
import HmFooter from './components/HmFooter.vue'
export default {
  // 注册组件
  components: {
    HmHeader,
    HmBody,
    HmFooter
  },

  data() {
    return {
      list: [
        {
          id: 1,
          value: "读万卷书",
          flag: true,
        },
         {
          id: 2,
          value: "行万里路",
          flag: false,
        },
      ],
      isShow: 'all',
  
    }
  },

  methods: {
    // 添加列表
    addList(value) {
      this.list = [...this.list, {
          id: +new Date(),
          value,
          flag: false,
        }]
    },

    // 删除列表
    delList(id) {
      
      this.list = this.list.filter(item => item.id !== id)
    },

    // 清除已完成
    clearList() {
      this.list = this.list.filter(item => !item.flag)
    },

    // 切换
    switchover(value) {

      this.isShow = value
    },

    // 全选
    isAll(flag) {
      this.list = this.list.forEach(item => item.flag = flag)
    }
  },

  computed: {
    sum() {
      
      return  this.list.filter(item => !item.flag).length
    },

    renderList() {
      switch (this.isShow) {
        case "all": 
          return this.list
        case "active": 
          return this.list.filter(item => !item.flag)
        case "completed": 
          return this.list.filter(item => item.flag)  
        default:
          return this.list
      }
    }
  }
}
</script>

<style></style>
